
$breakpoints:(
  'phone': (320px, 480px),
  'ipad': (481px, 768px),
  'laptop': (769px, 1920px),
  'desktop': (1921, 3440px),
  'tv':(3441px),
  );
/**
 * 根据设备类型生成相应的媒体查询。
 * 
 * @mixin responseTo
 * @param {String} $breakname - 设备类型名称，对应$breakpoints映射中的键。
 * @content 媒体查询内部的CSS规则。
 */
@mixin responseTo($breakname) {
    $bp:map-get($breakpoints,$breakname);
    @if type-of($bp) == 'list'{
       @media (min-width:nth($bp,1)) and (max-width:nth($bp,2)){
        @content
       }
    }@else{
        @media(min-width: $bp){
            @content
        }
    }
}
